<script setup>
import { getAnnouncementList } from '@/api/modules/help-center.js'
import { useRoute } from 'vue-router'
import { useI18n } from "vue-i18n";

const { t, locale } = useI18n()

const tabsList = ref([
  {
    label: t('content.helpCenter.questionAnswer'),
    noticeType: 4
  },
  {
    label: t('content.helpCenter.systemAnnouncement'),
    noticeType: 5
  }
])
const route = useRoute()
const form = ref({
  noticeType: Number(route.query.activeIndex) || 4,
  pageSize: 6,
  pageNum: 1
})
const announcementList = ref([])
// 获取列表
const getAnnouncement = () => {
  getAnnouncementList(form.value).then(({ rows }) => {
    announcementList.value = rows
    ElMessage.success('加载成功')
  })
}
onMounted(() => {
  getAnnouncement()
})
watch(() => form.value.noticeType, () => {
   form.value.pageNum = 1
   form.value.pageSize = 6
   getAnnouncement()
  }
)
</script>

<template>
  <div class="contactOurBg py-[70px] text-center relative overflow-hidden">
    <h2 class="text-[30px] fadeInLeft animated">{{$t('content.helpCenter.bgTitle1')}}</h2>
    <h3 class="mt-[20px] fadeInRight animated">{{$t('content.helpCenter.bgTitle2')}}</h3>
    <div class="w-full absolute bottom-0 left-0 lg:left-1/2 lg:-translate-x-1/2 overflow-x-auto lg:w-[1024px] contentList pr-3">
      <div class="flex pl-10">
        <router-link
          v-for="item in tabsList"
          :key="item.noticeType"
          :to="''"
          class="bg-white rounded-t-lg text-black ml-3 hover:text-[#8f647b] p-3 transition-all text-nowrap"
          :class="form.noticeType === item.noticeType ? 'active' : ''"
          @click="form.noticeType = item.noticeType"
          >{{ item.label }}</router-link
        >
      </div>
    </div>
  </div>
  <div class="flex justify-center">
    <div class="lg:w-[1024px] w-full min-h-[400px]  p-3 pt-[50px]">
      <div

        @click="$router.push({name:'notice',query:{id:item.id}})"
        class="item hover:bg-[#f6f6f6] pt-10 pl-10"
        v-for="item in announcementList"
        :key="item.id"
      >
        <div class="con">
          <h3>
            <div
              class="title text-[18px] text-[#202020] font-normal overflow-hidden overflow-ellipsis whitespace-nowrap"
            >
              {{ item.title }}
            </div>
          </h3>
          <div class="text-[14px] text-[#a0a0a0] mt-[10px] mb-[15px] overflow-ellipsis no-wrap">
            {{ item.createTime }}
          </div>
          <div
            class="h-[75px] leading-normal-[25px] text-[#828282] text-[14px] overflow-hidden overflow-ellipsis"
          >
            {{ item.description }}
          </div>
        </div>
        <el-divider border-style="dashed" />
      </div>
      <div class="w-full h-full flex  items-center  justify-center"   v-if="!announcementList.length">
        <el-empty :description="$t('content.helpCenter.emptyNone')" />  </div>
      <div class="w-full flex items-center  justify-center" v-if="!(announcementList.length <= 6 && form.pageNum === 1)">
            <!-- 分页器 -->
      <el-pagination
      v-model:current-page="form.pageNum"
      v-model:page-size="form.pageSize"
      :page-sizes="[6,10, 20, 30, 40,100,200]"
      :small="true"
      :disabled="false"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="announcementList.length"
      @size-change="getAnnouncement"
      @current-change="getAnnouncement"
    />
      </div>
    </div>
  </div>
</template>

<style scoped>
.contactOurBg {
  background: url(@/assets/img/contactOurBg.jpg) #f8f8f9 top center no-repeat;
  background-size: cover;
  color: #fff;
}

.contentList::-webkit-scrollbar {
  display: none;
}

.clause h2 {
  font-weight: bold;
}

.clause h3 {
  font-weight: bold;
  text-indent: 2em;
}

.clause h4 {
  text-indent: 4em;
}

.clause h5 {
  text-indent: 6em;
}
.active,
.item:hover .title {
  color: red;
}



</style>
